<template>
  <div class="flex">
    <router-link
      v-for="item in aCompositionLink"
      :key="item.name"
      :to="{name: item.name}"
      class="ml-3"
    >{{item.text}}</router-link>
  </div>

  <hr />

  <h1>
    Composition API 相关特性 之
    <span  ref="oDiv" style="color: green;">{{knowledgePoints}}</span>
  </h1>

  <!-- router-view组件也可以添加属性和方法; 但是由于外部组件没有定义props或emits接收,可能无法传递继承 -->
  <!-- @change-second-level="modifyPoint" -->
  <router-view></router-view>

  <hr />

  <common-props a b c="1" msg="props相关特性" :a-link="aLink" />
  <common-context msg="context相关特性" />
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import CommonProps from "@/components/common/Props.vue";
import CommonContext from "@/components/common/Context.vue";
export default defineComponent({
  name: "Home",
  components: {
    [CommonProps.name]: CommonProps,
    [CommonContext.name]: CommonContext,
  },
  setup() {
    const oDiv = ref(null)
    const knowledgePoints = ref<string>("Responsive");
    const aLink = [
      {
        h3: "Installed CLI Plugins",
        ul: [
          {
            text: "babel",
            link:
              "https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel",
          },
          {
            text: "router",
            link:
              "https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router",
          },
          {
            text: "vuex",
            link:
              "https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex",
          },
          {
            text: "eslint",
            link:
              "https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint",
          },
          {
            text: "typescript",
            link: "",
          },
        ],
      },
      {
        h3: "Essential Links",
        ul: [
          {
            text: "Core Docs",
            link: "https://vuejs.org",
          },
          {
            text: "Forum",
            link: "https://forum.vuejs.org",
          },
          {
            text: "Community Chat",
            link: "https://chat.vuejs.org",
          },
          {
            text: "Twitter",
            link: "https://twitter.com/vuejs",
          },
          {
            text: "News",
            link: "https://news.vuejs.org",
          },
        ],
      },
      {
        h3: "Ecosystem",
        ul: [
          {
            text: "vue-router",
            link: "https://router.vuejs.org",
          },
          {
            text: "vuex",
            link: "https://vuex.vuejs.org",
          },
          {
            text: "vue-devtools",
            link: "https://github.com/vuejs/vue-devtools#vue-devtools",
          },
          {
            text: "vue-loader",
            link: "https://vue-loader.vuejs.org",
          },
          {
            text: "awesome-vue",
            link: "https://github.com/vuejs/awesome-vue",
          },
        ],
      },
      {
        h3: "RFC",
        ul: [
          {
            text: "RFC",
            link: "https://vue-composition-api-rfc.netlify.app/zh",
          },
          {
            text: "Vue Composition API RFC",
            link: "https://vue-composition-api-rfc.netlify.app/zh/api.html",
          },
          {
            text: "Vue Compostion Repository",
            link: "https://github.com/vuejs/composition-api",
          },
        ],
      },
    ];
    const aCompositionLink = [
      {
        text: "响应式数据",
        link: "/c-api/responsive",
        name: "Responsive",
      },
      {
        text: "监听",
        link: "/c-api/watch",
        name: "Watch",
      },
      {
        text: "生命周期",
        link: "/c-api/life-cycle",
        name: "LifeCycle",
      },
      {
        text: "依赖注入",
        link: "/c-api/provide-inject",
        name: "ProvideInject",
      },
    ];

    const route = useRoute();
    watchEffect(() => {
      switch (route.path) {
        case "/c-api":
        case "/c-api/responsive":
          knowledgePoints.value = "Responsive";
          break;
        case "/c-api/watch":
          knowledgePoints.value = "Watch";
          break;
        case "/c-api/life-cycle":
          knowledgePoints.value = "LifeCycle";
          break;
        case "/c-api/provide-inject":
          knowledgePoints.value = "ProvideInject";
          break;
        default:
          break;
      }
    });

    const modifyPoint = (val: string) => {
      knowledgePoints.value = val;
    };
    return {
      knowledgePoints,
      aLink,
      aCompositionLink,
      modifyPoint,
    };
  },
});
</script>

<style lang="less">
a {
  font-weight: bold;
  color: #2c3e50;
  &.router-link-exact-active {
    color: #42b983;
  }
}
</style>
